<template>
  <div class="header">
    <a href="#/">
      <img class="logo" src="@/assets/logo.png" width="45px" alt />
      <span class="company">会员管理系统</span>
    </a>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        {{user.name}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
        <el-dropdown-item command="exit">退出系统</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="450px">
      <el-form
        status-icon
        :rules="rules"
        ref="pwdform"
        :model="pwdform"
        style="width:350px; margin-top:-20px"
      >
        <el-form-item label="原密码" :label-width="formLabelWidth" prop="oldPwd">
          <el-input v-model="pwdform.oldPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPwd">
          <el-input v-model="pwdform.newPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重复密码" :label-width="formLabelWidth" prop="replacePwd">
          <el-input v-model="pwdform.replacePwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center; margin-top:-40px">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePwd('pwdform')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { logout } from "@/api/login";
import passwordApi from "@/api/password";
export default {
  data() {
    var validateOldPass = (rule, value, callback) => {
      passwordApi.checkPwd(this.user.id, value).then(res => {
        const resp = res.data;
        if (resp.flag) {
          callback();
        } else {
          callback(new Error(resp.message));
        }
      });
    };
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.pwdform.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      user: JSON.parse(localStorage.getItem("user_Info")).data,
      pwdform: {
        oldPwd: "",
        newPwd: "",
        replacePwd: ""
      },
      dialogFormVisible: false,
      formLabelWidth: "110px",
      rules: {
        oldPwd: [
          { validator: validateOldPass, trigger: "blur" },
          { required: true, message: "原密码不能为空", trigger: "blur" }
        ],
        newPwd: [
          { required: true, message: "新密码不能为空", trigger: "blur" }
        ],
        replacePwd: [
          { validator: validatePass2, trigger: "blur" },
          { required: true, message: "确认密码不能为空", trigger: "blur" }
        ]
      }
    };
  },

  components: {},

  methods: {
    handleCommand(command) {
      switch (command) {
        case "changePassword":
          this.dialogFormVisible = true;
          this.$nextTick(() => {
            this.$refs["pwdform"].resetFields();
          });
          break;
        case "exit":
          this.exit();
          this.$message("退出系统成功");
          break;
        default:
          break;
      }
    },
    exit() {
      const token = localStorage.getItem("user_token");
      logout(token).then(res => {
        const resp = res.data;
        if (resp.flag) {
          // 退出系统，清理本地缓存
          console.log(resp.message);
          localStorage.removeItem("user_token");
          localStorage.removeItem("user_Info");
          this.$router.push("/login");
        } else {
          // 退出失败
        }
      });
    },
    changePwd(formName) {
      this.$refs[formName].validate(validate => {
        if (validate) {
          console.log("校验成功");
          passwordApi
            .changePwd(this.user.id, this.pwdform.replacePwd)
            .then(res => {
              const resp = res.data;
              console.log(resp);
              if (resp.flag) {
                this.$message({
                  message: "密码更新成功",
                  type: "success"
                });
                this.exit();
                this.dialogFormVisible = false;
              } else {
                //修改失败
              }
            });
        }
      });
    }
  }
};
</script>

<style scoped>
.logo {
  vertical-align: middle;
  padding: 0 10px 0 30px;
}
.company {
  color: #fff;
  vertical-align: middle;
}
.el-dropdown {
  float: right;
  margin-right: 30px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>